<template>
    <view class="contater">
        <up-navbar :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="m-[30rpx] rounded-t-[16rpx] rounded-b-[24rpx]">
			<view class="rounded-[16rpx] bg-[#fff] p-[30rpx] flex items-center">
				<view class="mr-[40rpx] flex-1">
					<view class="mb-[20rpx] text-[26rpx] text-[#333] font-bold">{{ Detail.appStore?.name }}</view>
					<view class="flex items-center mb-[20rpx]">
						<image src="../static/haddress.png" mode="scaleToFill" class="w-[20rpx] h-[20rpx] block mr-[4rpx] flex-shrink-0"/>
						<view class="text-[22rpx] text-[#999] font-normal">{{ Detail.appStore?.province }}{{ Detail.appStore?.city }}{{ Detail.appStore?.address }}</view>
					</view>
					<view class="flex items-center">
						<image src="../static/htime.png" mode="scaleToFill" class="w-[20rpx] h-[20rpx] block mr-[4rpx] flex-shrink-0"/>
						<view class="text-[22rpx] text-[#999] font-normal">营业时间：{{ Detail.appStore?.businessHours }}</view>
					</view>
				</view>
				<up-line length="182rpx" direction="col"></up-line>
				<view class="ml-[68rpx] flex flex-col justify-center mr-[52rpx]">
					<view class="text-[22rpx] text-[#46A7FD] font-normal mb-[8rpx]">联系/导航</view>
					<view class="mb-[16rpx] text-[20rpx] text-[#999] font-normal">距离{{(Detail.distance/1000).toFixed(2)}}km</view>
					<view class="flex items-center">
						<image src="../static/bphone.png" mode="scaleToFill" class="w-[36rpx] h-[36rpx] block mr-[32rpx]"/>
						<image src="../static/baddress.png" mode="scaleToFill" class="w-[36rpx] h-[36rpx] block"/>
					</view>
				</view>
			</view>
			<up-line></up-line>
			<view class="rounded-b-[24rpx] bg-[#F5F5F5] p-[32rpx]">
				<view class="flex justify-center items-center pt-[56rpx] pb-[100rpx]">
					<image :src="'data:image/png;base64,'+Detail.receiveCode" mode="scaleToFill" class="w-[292rpx] h-[292rpx] block rounded-[16rpx]"/>
				</view>
				<view class="relative">
					<view class="wy w-[24rpx] h-[24rpx] rounded-[50%] bg-[#E5E5E5] absolute left-[-40rpx] top-[50%]"></view>
					<up-line></up-line>
					<view class="wy w-[24rpx] h-[24rpx] rounded-[50%] bg-[#E5E5E5] absolute right-[-40rpx] top-[50%]"></view>
				</view>
				<view class="pt-[32rpx]">
					<view class="mb-[8rpx] text-[24rpx] text-[#999] font-normal">下单时间: {{ Detail.payTime }}</view>
					<view class="flex justify-between items-center">
						<view class="text-[24rpx] text-[#999] font-normal">订单编号: {{ Detail.orderSn }}</view>
						<view class="text-[24rpx] text-[#999] font-normal" @click="copy">复制</view>
					</view>
				</view>
			</view>
        </view>
		<view @click="saoQrcode">扫二维码</view>
    </view>
</template>

<script setup>
import env from '@/config/common.js'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { GetOrderGood, GetOrderReceiveShop } from '../../API/order'
const { goback, gohome } = useTable()
const { copy , getDetail , ReceiveShop } = useDetailCopy()
const Detail = ref({})
const id = ref({})
const baseUrl = env.API_BASE_URL_DEV
function saoQrcode(){
	uni.scanCode({
		success: function (res) {
			let id = res.path.split('=')[1]
			ReceiveShop(id)
		}
	});
}
function useTable(){
	const goback = ()=>{
		uni.navigateBack()
	}
	const gohome = ()=>{
		uni.switchTab({
		    url:'/pages/index/index'
		})
	}
	return { goback, gohome }
}
function useDetailCopy(){
	const copy = ()=>{
		uni.setClipboardData({
	        data: 'hello',
	        success: function () {
		        console.log('success');
	        }
        });
	}
	const getDetail = async(id,value)=>{
		let { data } = await GetOrderGood(id,value)
        Detail.value = data
        Detail.value.orderPageVoList = data.orderPageVoList.map(item=>{
            item.pic = baseUrl + item.pic
            return item
        })
	}
	const ReceiveShop = async(id)=>{
		let { data } = await GetOrderReceiveShop(id)
	}
	return{ copy , getDetail , ReceiveShop }
}
onLoad( async(options)=>{
	id.value = options.id
    uni.getLocation({
		type: 'wgs84',
		geocode:true,//设置该参数为true可直接获取经纬度及城市信息
		success: async (res)=>{
            await getDetail(id.value,{
                lat:res.latitude,
                lng:res.longitude
            })
		},
		fail: (err)=>{
			uni.showToast({
				title: '获取地址失败，将导致部分功能不可用',
				icon:'none'
			});
		}
	})
})
</script>

<style lang="scss" scoped>
.contater{
    background-color: #e5e5e5;
    min-height: 100vh;
	.wy{
		transform: translate(0,-50%);
	}
}
</style>